<!DOCTYPE html>
<html>
<head>
    <title>Search Test</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body { padding: 20px; font-family: Arial; }
        .search-box { margin: 20px 0; }
        input { padding: 10px; width: 300px; }
        button { padding: 10px 20px; margin-left: 10px; }
        .results { margin-top: 20px; border: 1px solid #ddd; padding: 20px; min-height: 200px; }
        .node-item { padding: 10px; margin: 5px 0; background: #f0f0f0; cursor: pointer; }
        .node-item:hover { background: #e0e0e0; }
        .debug { background: #ffffcc; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <h1>Search Functionality Test</h1>

    <div class="search-box">
        <input type="text" id="searchInput" placeholder="Enter search term (e.g., user, client, fee)" />
        <button onclick="testSearch()">Search</button>
        <button onclick="clearSearch()">Clear</button>
    </div>

    <div class="debug" id="debug">Debug info will appear here...</div>

    <div class="results" id="searchResults">
        Results will appear here...
    </div>

    <script>
        async function testSearch() {
            const query = document.getElementById('searchInput').value;
            const debugDiv = document.getElementById('debug');
            const resultsDiv = document.getElementById('searchResults');

            debugDiv.innerHTML = `Query: "${query}"<br>`;

            if (!query) {
                debugDiv.innerHTML += 'Error: Empty query';
                return;
            }

            debugDiv.innerHTML += 'Sending request to API...<br>';

            try {
                const response = await axios.get('http://localhost:5555/api/search', {
                    params: { q: query }
                });

                debugDiv.innerHTML += `Status: ${response.status}<br>`;
                debugDiv.innerHTML += `Results count: ${response.data.length}<br>`;

                const results = response.data;

                if (results.length === 0) {
                    resultsDiv.innerHTML = '<p>No results found</p>';
                    return;
                }

                const resultsHtml = results.map(node => `
                    <div class="node-item" onclick="alert('Would load: ${node.id}')">
                        <div><strong>${node.label}</strong></div>
                        <div style="font-size: 12px; color: #666;">
                            ID: ${node.id}<br>
                            Degree: ${node.degree} (In: ${node.in_degree}, Out: ${node.out_degree})
                        </div>
                    </div>
                `).join('');

                resultsDiv.innerHTML = resultsHtml;
            } catch (error) {
                debugDiv.innerHTML += `Error: ${error.message}<br>`;
                console.error('Full error:', error);
                resultsDiv.innerHTML = '<p style="color: red;">Error performing search</p>';
            }
        }

        function clearSearch() {
            document.getElementById('searchInput').value = '';
            document.getElementById('searchResults').innerHTML = 'Results cleared';
            document.getElementById('debug').innerHTML = 'Debug info cleared';
        }

        // Test on Enter key
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                testSearch();
            }
        });

        // Auto-test with a known query
        window.onload = function() {
            document.getElementById('searchInput').value = 'user';
            document.getElementById('debug').innerHTML = 'Page loaded. Try searching for "user"';
        };
    </script>
</body>
</html>